<template>
    <!-- 两链管理-列表页 -->
    <div class="chains-list">
        <!-- 搜索 -->
        <div class="search-from flex justify-between">
            <el-form :inline="true" :model="searchFrom">
                <el-form-item label="文件名称：">
                    <el-input v-model="searchFrom.fileName" placeholder="文件名称"></el-input>
                </el-form-item>
                <el-form-item label="文件类型：">
                    <el-select v-model="searchFrom.fileType" placeholder="请选择">
                        <el-option
                                v-for="item in fileType"
                                :key="item.value"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传时间：">
                    <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="info" @click="reset">重置</el-button>

                    <el-button v-has="101" type="primary" @click="openUploadDialog">上传文件</el-button>
                    <el-button v-has="103" type="danger" plain @click="handle('batch')">批量删除</el-button>
                    <el-button type="primary" plain @click="goBack"><< 返回</el-button>
                </el-form-item>
            </el-form>
            <!--<div>-->
            <!--<el-button type="primary" @click="openUploadDialog">上传文件</el-button>-->
            <!--<el-button type="danger" plain>批量删除</el-button>-->
            <!--<el-button type="primary" plain @click="goBack"><< 返回</el-button>-->
            <!--</div>-->
        </div>

        <!-- 表格 -->
        <div class="table-list">
            <el-table
                    ref="table"
                    :data="tableData"
                    stripe
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelect">
                <el-table-column
                        header-align="center"
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column label="序号" width="60">
                    <template slot-scope="scope">
                        <span>{{ searchFrom.pageSize * (searchFrom.pageIndex - 1)  + 1 + scope.$index }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="文件名称"
                        prop="fileName"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="chainType"
                        width="100"
                        label="文件类别">
                    <template slot-scope="scope">
                        {{ getChainType(scope.row.chainType) }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="fileType"
                        label="文件类型">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="上传人">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="上传时间">
                </el-table-column>
                <el-table-column
                        prop="fileDesc"
                        label="备注">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-has="102" type="text" @click="handle('download', scope.row)">下载</el-button>
                        <el-button v-has="103" type="text" @click="handle('single', scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="margin-t-10 margin-b-10 text-center">
                <el-pagination
                        @current-change="changePage"
                        :current-page.sync="searchFrom.pageIndex"
                        :page-size="searchFrom.pageSize"
                        layout="prev, pager, next, jumper"
                        prev-text="上一页"
                        next-text="下一页"
                        :total="tableData.length">
                </el-pagination>
            </div>
        </div>

        <!-- 上传文件 -->
        <uploadFile v-if="uploadVisible.visible" :uploadVisible="uploadVisible" :searchFrom="searchFrom" @getList="getList"></uploadFile>
    </div>
</template>

<script>
    import { queryByPage, delData, batchDelData } from '@/api/target';
    import { getStorage } from '@/config/utils';
    import uploadFile from './modules/uploadFile'

    export default {
        name: 'chainsList',
        components: {
            uploadFile
        },
        data () {
            return {
                pickerOptions: this.$config.pickerOptions,
                fileType: this.$config.fileType,
                // 上传文件
                uploadVisible: {
                    visible: false
                },
                // 多选，选中的数据
                selectArr: [],
                // 搜索相关参数
                searchFrom: {
                    fileName: '',
                    fileType: '',
                    startTime: '',
                    endTime: '',
                    pageSize: 10,
                    pageIndex: 1
                },
                dateRange: [],
                total: 0,
                tableData: []
            }
        },
        computed: {
            chainType () {
                return getStorage('chainType')
            }
        },
        created () {
            // 根据上一级页面传过来的参数修改搜索参数
            this.searchFrom.indexX = this.$route.query.indexX;
            this.searchFrom.indexY = this.$route.query.indexY;
            this.getList()
        },
        methods: {
            // 多选
            handleSelect (val) {
                this.selectArr = val.map(item => item.id);
            },
            // 查询列表
            getList () {
                if (this.dateRange.length) {
                    this.searchFrom.startTime = this.dateRange[0];
                    this.searchFrom.endTime = this.dateRange[1];
                }
                queryByPage(this.searchFrom).then(res => {
                    this.tableData = res.dataList || [];
                    this.total = res.total || 0;
                }).catch()
            },
            // 查询
            search () {
                this.searchFrom.pageIndex = 1;
                this.getList();
            },
            // 重置
            reset () {
                this.searchFrom = {
                    indexX: this.$route.query.indexX,
                    indexY: this.$route.query.indexY,
                    fileName: '',
                    fileType: '',
                    startTime: '',
                    endTime: '',
                    pageSize: 10,
                    pageIndex: 1
                };
                this.dateRange = [];
                this.getList();
            },
            // 返回上一级页面
            goBack () {
                this.$router.go(-1)
            },
            // 切换页码
            changePage (val) {
                this.searchFrom.pageIndex = val;
                this.getList();
            },
            // 打开上传文件弹框
            openUploadDialog () {
                this.uploadVisible.visible = true
            },
            // 删除
            handle (type, row) {
                if (type === 'batch' && !this.selectArr.length) {
                    this.$message.warning('请选择需要删除的数据');
                    return
                }
                switch (type) {
                    case 'single':
                        this.$confirm('您确定要删除该数据吗?', '删除', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            delData(row.id).then(res => {
                                this.$message.success('操作成功');
                                this.getList();
                            }).catch()
                        }).catch();
                        break;
                    case 'batch':
                        if (!this.selectArr.length) {
                            this.$message.warning('请选择需要删除的数据');
                        } else {
                            this.$confirm('您确定要删除这些数据吗?', '批量删除', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                const params = {
                                    ids: this.selectArr
                                };
                                batchDelData(params).then(res => {
                                    this.$message.success('操作成功');
                                    this.getList();
                                }).catch()
                            }).catch();
                        }
                        break;
                    case 'download':
                        if (row.fileName && row.filePath) {
                            // window.open(this.baseURL + `/v1/pc/api/file/fileDownload?fileName=${row.fileName}&filePath=${row.filePath}`, '_self');
                        } else {
                            this.$message.error('文件错误，无法下载！');
                        }
                        break
                }
            },
            // 根据文件类别编码获取文件类别名称
            getChainType (code) {
                const temp = this.chainType.filter(item => item.code === code);
                if (temp && temp.length) {
                    return temp[0].name
                }
                return ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .chains-list {

    }
</style>
